Update design of message dividers#6176
Conversation
PR checklist ✅All required conditions are satisfied:
🎉 Great job! This PR is ready for review. |
SDK Size Comparison 📏
|
WalkthroughThis PR introduces a new internal MessageDivider Composable component to replace the deleted MessageDateSeparatorTheme and MessageUnreadSeparatorTheme classes. It removes related theme parameters from ChatTheme, updates MessageItem to use the new component, and adds a chatTextSystem color property to StreamColors. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageItem.kt (2)
147-173: Inconsistent modifier ordering between the two separator functions.
DefaultMessageDateSeparatorContentchains.padding(vertical = 8.dp).fillMaxWidth()(padding first), whileDefaultMessageUnreadSeparatorContentuses.fillMaxWidth().padding(bottom = 8.dp)(fill first). Both produce identical layout since only vertical padding is involved, but the inconsistency makes the code harder to reason about.♻️ Align date separator to the same ordering
MessageDivider( text = ChatTheme.dateFormatter.formatRelativeDate(dateSeparator.date), modifier = Modifier .semantics(mergeDescendants = true) { testTag = "Stream_MessageDateSeparator" } - .padding(vertical = 8.dp) - .fillMaxWidth(), + .fillMaxWidth() + .padding(vertical = 8.dp), )🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageItem.kt` around lines 147 - 173, The modifiers for the unread separator are ordered inconsistently with the date separator; update DefaultMessageUnreadSeparatorContent so its Modifier chains match DefaultMessageDateSeparatorContent by applying .padding(bottom = 8.dp) (or vertical padding) before .fillMaxWidth(), keeping the same semantics block and testTag ("Stream_UnreadMessagesBadge") and preserving the padding value behavior.
165-173: Prefer idiomaticstringResource()overLocalResources.current.getString()for a plain string lookup.
stringResource(already imported at line 32) is the standard Compose API for this, handles configuration changes identically, and is consistent with how other string resources are fetched in this file (e.g., line 248).LocalResources.current.getString(...)works correctly but is more verbose and non-idiomatic here.♻️ Proposed simplification
-import androidx.compose.ui.platform.LocalResources ... `@Composable` internal fun DefaultMessageUnreadSeparatorContent(unreadSeparatorItemState: UnreadSeparatorItemState) { MessageDivider( - text = LocalResources.current.getString(R.string.stream_compose_message_list_unread_separator), + text = stringResource(R.string.stream_compose_message_list_unread_separator), modifier = Modifier🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageItem.kt` around lines 165 - 173, Replace the non-idiomatic LocalResources.current.getString(...) call used in the MessageDivider inside MessageItem (the MessageDivider invocation that sets the unread separator text) with the Compose helper stringResource(...) (already imported) so the text parameter uses stringResource(R.string.stream_compose_message_list_unread_separator); keep the same semantics and modifiers (semantics, testTag, fillMaxWidth, padding) unchanged.stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageDivider.kt (1)
49-62: Consider adding a Paparazzi snapshot test forMessageDivider.The preview is a good start, but this component is a visible UI element and a Paparazzi test would guard against unintended regressions.
Based on learnings: "Applies to
**/stream-chat-android-compose/**/*Test.kt: Add Paparazzi snapshots for Compose UI regressions and runverifyPaparazziDebug."🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageDivider.kt` around lines 49 - 62, Add a Paparazzi snapshot test for the MessageDivider composable by creating a test class (e.g., MessageDividerPaparazziTest) that uses a Paparazzi rule (`@get`:Rule val paparazzi = Paparazzi(...)) and renders the same content as MessageDividerPreview (wrap the composables in ChatTheme and a Column with MessageDivider("Unread messages"), MessageDivider("Today"), MessageDivider("Tue, 25 Dec")); take a snapshot via paparazzi.snapshot or equivalent and commit the golden; ensure the test lives under the stream-chat-android-compose test sources and runs as part of verifyPaparazziDebug to catch visual regressions.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@stream-chat-android-compose/api/stream-chat-android-compose.api`:
- Around line 3313-3314: The ChatTheme signature was expanded with new defaulted
parameters; run and verify Paparazzi snapshot tests to ensure no Compose UI
regressions by executing the existing tests (e.g., PaparazziComposeTest.kt and
MessageComposerScreenTest.kt) and updating baselines using the
verifyPaparazziDebug task; if snapshots changed, record new golden images and
commit them so ChatTheme consumers continue to render identically.
In
`@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageItem.kt`:
- Line 30: The unread separator in MessageItem.kt uses
LocalResources.current.getString(...) instead of the Compose idiomatic
stringResource(...) and its Modifier ordering differs from the date separator;
replace the
LocalResources.current.getString(R.string.stream_compose_message_list_unread_separator)
call with stringResource(R.string.stream_compose_message_list_unread_separator)
(the stringResource import is already present) and reorder the unread
separator's Modifier to match the date separator (use .padding(vertical =
8.dp).fillMaxWidth() or the same padding semantics as the date separator) so
both separators use consistent resource access and modifier ordering.
In
`@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt`:
- Line 208: Add the missing KDoc `@param` for the newly introduced public property
chatTextSystem in the StreamColors KDoc block (in StreamColors.kt) so the public
API is fully documented; update the existing KDoc that documents other chat*
parameters to include a brief description for `@param` chatTextSystem describing
its purpose and how it differs from chatTextPrimary/chatTextSecondary.
---
Nitpick comments:
In
`@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageDivider.kt`:
- Around line 49-62: Add a Paparazzi snapshot test for the MessageDivider
composable by creating a test class (e.g., MessageDividerPaparazziTest) that
uses a Paparazzi rule (`@get`:Rule val paparazzi = Paparazzi(...)) and renders the
same content as MessageDividerPreview (wrap the composables in ChatTheme and a
Column with MessageDivider("Unread messages"), MessageDivider("Today"),
MessageDivider("Tue, 25 Dec")); take a snapshot via paparazzi.snapshot or
equivalent and commit the golden; ensure the test lives under the
stream-chat-android-compose test sources and runs as part of
verifyPaparazziDebug to catch visual regressions.
In
`@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageItem.kt`:
- Around line 147-173: The modifiers for the unread separator are ordered
inconsistently with the date separator; update
DefaultMessageUnreadSeparatorContent so its Modifier chains match
DefaultMessageDateSeparatorContent by applying .padding(bottom = 8.dp) (or
vertical padding) before .fillMaxWidth(), keeping the same semantics block and
testTag ("Stream_UnreadMessagesBadge") and preserving the padding value
behavior.
- Around line 165-173: Replace the non-idiomatic
LocalResources.current.getString(...) call used in the MessageDivider inside
MessageItem (the MessageDivider invocation that sets the unread separator text)
with the Compose helper stringResource(...) (already imported) so the text
parameter uses
stringResource(R.string.stream_compose_message_list_unread_separator); keep the
same semantics and modifiers (semantics, testTag, fillMaxWidth, padding)
unchanged.
|
|
🚀 Available in v7.0.0-beta |


Goal
Update design of message dividers, i.e. date and unread dividers
Implementation
MessageDividercomponent and use it for the dividersMessageUnreadSeparatorThemeandMessageDateSeparatorTheme🎨 UI Changes
Testing
As usual, in the sample
Summary by CodeRabbit
New Features
Bug Fixes / Improvements
Theme Updates